<!--  -->
<template>
  <div class="map-container">
    <div id="map" />
  </div>
</template>

<script>
  import remoteLoad from '@/utils/loadMap.js'

  let map
  export default {
    components: {},
    data() {
      return {
        AMapUI: null,
        AMap: null
      }
    },
    async created() {
      if (window.AMap && window.AMapUI) {
        this.init()
      } else {
        await remoteLoad(`http://webapi.amap.com/maps?v=1.4.15&key=25c2d7b46a0cf0df31cf625275f0d18d`)
        await remoteLoad(`http://webapi.amap.com/ui/1.1/main.js`)
        await this.init()
      }
    },
    methods: {
      init() {
        const AMapUI = this.AMapUI = window.AMapUI
        const AMap = this.AMap = window.AMap
        AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
          const mapConfig = {
            zoom: 20,
            pitch: 75, //
            resizeEnable: true,
            viewMode: '3D', // 开启3D视图,默认为关闭
            buildingAnimation: true, // 楼块出现是否带动画
            center: [113.573156, 22.298518],
            rotate: 30
          }
          map = new AMap.Map('map', mapConfig)
          // 添加地图控件
          AMap.plugin(['AMap.ToolBar', 'AMap.ControlBar'], function() {
            map.addControl(new AMap.ToolBar({
              position: 'LT'
            }))
            map.addControl(new AMap.ControlBar())
            const marker = new AMap.Marker({
              icon: require('./img/camera.png'), // 自定义点标记
              position: [113.572958, 22.29927] // 基点位置
              // offset: new AMap.Pixel(0, 0) // 设置点标记偏移量
              // anchor: 'bottom-left' // 设置锚点方位
            })

            const ErrorMarker = new AMap.Marker({
              icon: require('./img/error.png'), // 自定义点标记
              position: [113.572725, 22.298936] // 基点位置
              // offset: new AMap.Pixel(0, 0) // 设置点标记偏移量
              // anchor: 'bottom-left' // 设置锚点方位
            })

            map.add(marker)
            map.add(ErrorMarker)
          })
        })

        // 添加标记点
      }
    }
  }
</script>
<style lang="scss" scoped>
  .map-container{
    width: 100%;
    height: 55vh;

    #map{
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }
  }

  ::v-deep .amap-copyright{
    display: none !important;
  }

  ::v-deep .amap-logo{
    display: none !important;
  }
</style>
